<template>
    <div class="functionalwindow" :id="functionalwindowId" :class="props.options == 'left' ? 'functionalwindowleft' : ''">
        <div class="coverageTitle" @mousedown="mousedown($event, functionalwindowId)" @mouseup="mouseup" @mouseout="mouseup">
            <div class="coverageTitleName">
                <i class="btnsImages" :class="props.icon"></i>
                {{ props.title }}
            </div>
            <i class="fa fa-close closeIcon" title="关闭" @click="setCoverage"></i>
        </div>
        <header>
            <slot name="header"></slot>
        </header>
        <main :class="!props.isFooter ? 'functionalwindowMain' : 'functionalwindowMainFootor'">
            <el-scrollbar wrap-class="scrollbar-wrapper">
                <slot></slot>
            </el-scrollbar>
        </main>
        <footer class="functionalwindowFooter" v-if="props.isFooter">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script setup lang="ts">
import { mousedown, mouseup } from "@/utils/move.el";
import { useStore } from "@/stores/index1";
import storages from "@/utils/storage";
// import global from "@/utils/global.data.params";
// import { graphicStartEditing } from "@/utils/global.function";
const store = useStore();
interface Props {
    title?: string; // 默认值
    icon?: string;
    type?: string;
    options?: string;
    isFooter?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    title: "",
    icon: "",
    type: "",
    options: "right",
    isFooter: true,
});
const functionalwindowId = `functionalwindow${new Date().getTime()}`;
const setCoverage = () => {
    if (props.options === "left") {
        (store as any)[props.type] = false;
        const graphic = storages.get(storages.get("graphicId"));
        if (graphic && graphic.isEditing) {
            graphic.stopEditing();
        }
    } else {
        (store as any).tool.toolDialog = false;
    }
};
</script>
